<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图数据统计</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container" style="padding-top: 30px;">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>柱状统计图</legend>
    </fieldset>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px;height:500px;"></div>


    <script src="layui/layui.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        $.get('/goodsApi/getBarEChartData',function (res) {
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '商品数量和分类数据统计图'
                },
                tooltip: {},
                legend: {
                    data:['商品数量','订单数量']
                },
                xAxis: {
                    data: res.data.typeName
                },
                yAxis: {},
                series: [
                    {
                        name: '商品数量',
                        type: 'bar',
                        data: res.data.goodsCount
                    },
                    {
                        name: '订单数量',
                        type: 'bar',
                        data: res.data.orderCount
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })


    </script>

</div>
</body>
</html>